<template>
  <!-- 忘记密码 -->
    <el-dialog
    v-model="state.forgetPasswordDialog"
    title="忘记密码"
    width="500"
  >
  <el-form class="login-form" :label-position="labelPostition" :rules="rules">
                    <el-form-item label="请输入您的注册账号" prop="account">
                        <el-input v-model="forgetData.account" placeholder="请输入您的注册账号" />
                     </el-form-item>
                     <el-form-item label="请输入您的个人邮箱" prop="email">
                        <el-input v-model="forgetData.email" placeholder="请输入您的个人邮箱"/>
                     </el-form-item>
                   
                  </el-form>
                    <!-- //底部外壳 -->
                    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.forgetPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="openChangePassword ">
          下一步
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- //修改密码-->
  <el-dialog
    v-model="state.changePasswordDialog"
    title="修改密码"
    width="500"
  >
  <el-form class="login-form" :label-position="labelPostition" :rules="rules">
                    <el-form-item label="请输入您的新密码" prop="repassword">
                        <el-input v-model="forgetData.password" placeholder="请输入您的新密码" />
                     </el-form-item>
                     <el-form-item label="请再次确认你的新密码" prop="repassword">
                        <el-input v-model="forgetData.password" placeholder="请再次确认你的新密码"/>
                     </el-form-item>
                   
                  </el-form>
                  
                    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.changePasswordDialog = false">取消</el-button>
        <el-button type="primary"  @click="state.forgetPasswordDialog = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" >
import { reactive, ref } from 'vue'

//表单对其方式
const labelPostition = ref('top')

//写表单对象接口接口
interface forgetData{
  account:string;
  email:string;
  password:string;
  repassword:string
}

//注册表单对象
const forgetData:forgetData = reactive({
  account:'',
  email:'',
  password:'',
  repassword:''
  
})

//表单验证规则
const rules = reactive({
  account: [
    { required: true, message: '请输入您的注册账号', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入您的邮箱', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入您想修改的密码', trigger: 'blur' },
  ],
  repassword: [
    { required: true, message: '请输确认密码', trigger: 'blur' },
  ],
})
//控制弹窗打开还是关闭默认是关闭
const state = reactive({
  forgetPasswordDialog:false,
  changePasswordDialog:false
})

//打开修改密码弹窗
const openChangePassword = () =>{
  state.forgetPasswordDialog = false,
  state.changePasswordDialog = true
}


//打开弹窗
const open = () => {
   
   state.forgetPasswordDialog = true;
   
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>

</style>